<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/city.js"></script>
    <script>
        window.onload = function () {
            // 1. 加载所有的省份及代号
            let province = document.getElementById("province");
            let city = document.getElementById("city");
            let district = document.getElementById("district");
            let str = "<option value='-1'>--请输入省份--</option>";
            for (let data of cityData) {
                let provinceName = data.name; //省份或直辖市名称
                let provinceNo = data.code; // 代号（后端接收去查数据库）
                str += "<option value='" + provinceNo + "'>" + provinceName + "</option>"
            }
            province.innerHTML = str;

            // 2.省份变化后触发的事件  onchange
            province.onchange = function () {
                // 1.获取到你选中的是哪个省或直辖市
                let provinceNo = this.value; // 已选中的option中的value(省份代号)
                if (provinceNo == -1) {
                    city.innerHTML = "<option value='-1'>--请输入城市--</option>";
                    district.innerHTML = "<option value='-1'>--请输入区/县--</option>";
                    return;
                }
                //2. 根据省份代号查询省份下所有的市级单位
                for (let data of cityData) {
                    if (provinceNo == data.code) {
                        //3. 获取省份对应的所有市级
                        let citys = data.areaList;
                        let str = "<option value='-1'>--请输入城市--</option>";
                        for (let city of citys) {
                            let cityName = city.name;
                            let cityNo = city.code;
                            str += "<option value='" + cityNo + "'>" + cityName + "</option>"
                        }
                        city.innerHTML = str;
                        break;
                    }
                }
            }

            //3. 当市级发生变化时需要同步区级单位
            city.onchange = function () {
                let provinceNo = province.value;  // 获取省级代号
                let cityNo = this.value;
                if (cityNo == -1) {
                    district.innerHTML = "<option value='-1'>--请输入区/县--</option>";
                    return;
                }
                // 查询过程 ： 省/直辖市  -> 城市  ->区
                for (let data of cityData) {
                    if (provinceNo == data.code) {
                        //3. 获取省份对应的所有市级
                        let citys = data.areaList;
                        for (let city of citys) {
                            if (cityNo == city.code) {
                                let districts = city.areaList;
                                let str = "<option value='-1'>--请输入区/县--</option>";
                                for (let dist of districts) {
                                    let districtName = dist.name;
                                    let districtNo = dist.code;
                                    str += "<option value='" + districtNo + "'>" + districtName + "</option>"
                                }
                                district.innerHTML = str;
                                break;
                            }
                        }
                    }
                }

            }

        }


    </script>

</head>
<body>
省份
<select name="province" id="province">
    <option value="-1">--请输入省份--</option>
</select>

市
<select name="city" id="city">
    <option value="-1">--请输入城市--</option>
</select>
区/县
<select name="district" id="district">
    <option value="-1">--请输入区/县--</option>
</select>
</body>
</html>